<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>图书详情</title>
    <link type="text/css" rel="stylesheet" href="dist/css/bootstrap.min.css" th:href="@{/dist/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" href="css/index.css" th:href="@{/css/index.css}">
    <link rel="stylesheet" type="text/css" href="css/animate.css" th:href="@{/css/animate.css}"/>
</head>

<body>
<!--导航部分  begin-->
<div th:replace="common/header::header"></div>
<!--导航部分 end-->

<!--最顶端轮播图片 begin-->
<div th:replace="common/carousel::carousel"></div>
<!--最顶端轮播图片 end-->

<!--外层div-->
<div class="container">
    <!--左边-->
    <div class="col-md-8 col-sm-12">
        <ol class="breadcrumb">
            <li>
                <a href="javascript:void(0)">图书详情</a>
            </li>
            <li>
                <a href="javascript:void(0)" th:text="${book.getName()}"></a>
            </li>
        </ol>

        <div class="row">
            <div class="col-sm-12 col-md-6">
                <div class="thumbnail">
                    <a><img th:src="@{'/images/'+${book.getImgUrl()}}" style="height: 200px;" alt="通用的占位符缩略图"></a>
                    <div class="caption">
                        <h3 th:text="${book.getName()}">愿你的青春不负梦想</h3>
                        <p>双十一特价,包邮哟!亲<img th:src="@{/images/3.gif}" style="width: 24px;height: 24px;"></p>
                        <p>
                        <div style="margin-bottom: 5px;width: 100px;">
                            <input type="number" id="selectCount" class="form-control" placeholder="购买数量" min="1"
                                   max="100">
                        </div>

                        <div style="clear: both;">
                            <a href="confirm_order.html" class="btn btn-default" role="button">
                                <span class="glyphicon glyphicon-usd"></span> 立即购买
                            </a>
                            <a href="javascript:void(0)" th:onclick="addCart([[${book.id}]])" class="btn btn-default"
                               role="button">
                                <span class="glyphicon glyphicon-shopping-cart"></span> 加入购物车
                            </a>
                        </div>

                        </p>
                    </div>
                </div>
            </div>

            <div class="col-sm-12 col-md-6">
                <div class="thumbnail">
                    <ul class="list-group">
                        <li class="list-group-item"><span class="text-success">图书名称:<span
                                th:text="${book.getName()}"></span></span></li>
                        <li class="list-group-item"><span class="text-info">作者:</span><span
                                th:text="${book.getAuthor()}"></span></li>
                        <li class="list-group-item"><span class="text-info">出版日期:<span
                                th:text="${#dates.format(book.publishDate,'yyyy年MM月')}"></span></span></li>
                        <li class="list-group-item"><span class="text-info">出版社:</span><span
                                th:text="${book.getPublisher()}"></span></li>
                        <li class="list-group-item"><span class="text-info"
                                                          style="text-decoration: line-through;">原价:</span><span
                                style="text-decoration: line-through;"><span th:text="${book.getOldPrice()}+'元'"></span></span>
                        </li>
                        <li class="list-group-item"><span class="text-info">现价:</span><span
                                th:text="${book.getNewPrice()}+'元'"></span></li>
                        <li class="list-group-item"><span class="text-info">说明:</span> <span
                                th:text="${book.getInfo()}"></span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--<hr>-->
        <!--折叠部分 begin-->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                        展开详细信息
                    </a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                    <!--tab选项卡 begin-->
                    <ul id="myTab" class="nav nav-tabs">
                        <li class="active">
                            <a href="#home" data-toggle="tab">
                                商品详情
                            </a>
                        </li>
                        <li>
                            <a href="#ios" data-toggle="tab"> <span class="badge pull-right">5</span>累计评价</a>
                        </li>
                    </ul>
                    <div id="myTabContent" class="tab-content">
                        <div class="tab-pane fade in active" id="home">
                            <p>
                                <em>产品参数：</em>
                            </p>
                            <div class="row">
                                <div class="col-sm-12 col-md-6">
                                    <ul class="nav navbar-collapse" style="line-height: 3;">
                                        <li class="text-info">产品名称：<span th:text="${book.name}"></span></li>
                                        <li class="text-info">是否是套装: <span
                                                th:text="${book.suit.getCode()} == '1' ? '是' : '否'"></span></li>
                                        <li class="text-info">书名:<span th:text="${book.name}"></span></li>
                                        <li class="text-info">定价: <span th:text="${book.oldPrice + '元'}"></span></li>
                                        <li class="text-info">出版社名称: <span th:text="${book.publisher}"></span></li>
                                        <li class="text-info">出版时间: <span></span></li>
                                        <li class="text-info">作者: <span th:text="${book.author}"></span></li>
                                        <li class="text-info">作者地区: <span th:text="${book.authorLoc}"></span></li>
                                        <li class="text-info">ISBN编号: <span th:text="${book.isbn}"></span></li>
                                    </ul>
                                </div>
                                <span class="visible-sm visible-xs"><hr></span>

                            </div>
                            </p>
                        </div>
                        <div class="tab-pane fade" id="ios">
                            <p>
                            <ul class="list-group">
                                <li class="list-group-item"><span class="text-info">小明:</span><span
                                        class="text-success ">这真的是一本好书<img th:src="@{/images/emotions/1.gif} "></span>
                                </li>
                                <li class="list-group-item"><span class="text-info">success:</span><span
                                        class="text-danger ">书的质量很差<img th:src="@{/images/emotions/2.gif} "></span></li>
                                <li class="list-group-item"><span class="text-info">叶老师:</span><span
                                        class="text-success ">很值得初学者学习<img th:src="@{/images/emotions/13.gif} "></span>
                                </li>
                                <li class="list-group-item"><span class="text-info">amdin:</span><span
                                        class="text-danger ">被坑大发了.<img th:src="@{/images/emotions/17.gif} "></span>
                                </li>
                                <li class="list-group-item"><span class="text-info">rose:</span><span
                                        class="text-danger ">卖家态度恶劣.<img th:src="@{/images/emotions/11.gif} "></span>
                                </li>
                            </ul>
                            </p>
                            <p>
                            <ul class="pager">
                                <li>
                                    <a href="javascript:void(0) ">&larr;上一页</a>
                                    <a href="javascript:void(0) ">下一页 &rarr;</a>
                                </li>
                            </ul>
                            </p>
                        </div>
                    </div>
                    <!--tab选项卡 end-->
                </div>
            </div>
        </div>
        <!--折叠部分end-->
    </div>

    <!--右边-->
    <div class="col-md-4 col-sm-3 col-xs-8">
        <ol class="breadcrumb ">
            <li>
                <a href="# " class="text-success "><span class="glyphicon glyphicon-shopping-cart "></span>我的购物车</a>
            </li>
            <li>
                <a href="# ">3个商品</a>
            </li>
            <li>
                <a href="# ">总价100元</a>
            </li>
        </ol>

        <!--猜您喜欢-->
        <div>
            <span class="text-info"><span class="glyphicon glyphicon-heart"></span><span
                    style="font-size: 20px; ">猜您喜欢</span></span>
            <div class="row" id="love">
                <div class="col-sm-12 col-md-12 wow fadeInRight animated">
                    <div class="thumbnail">
                        <a th:href="@{/book/detail(bookId=11)}"><img th:src="@{/images/xiaodaolifencunzhijian.jpg}"
                                                                     style="height: 200px; " alt="通用的占位符缩略图 "></a>
                        <div class="caption ">
                            <h3>小道理：分寸之间</h3>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-md-12 wow fadeInRight animated">
                    <div class="thumbnail ">
                        <a th:href="@{/book/detail(bookId=12)}"><img th:src="@{/images/NO SECRETS.jpg}"
                                                                     style="height: 200px; "
                                                                     alt="通用的占位符缩略图 "></a>
                        <div class="caption ">
                            <h3>名创优品没有秘密</h3>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-md-12 wow fadeInRight animated">
                    <div class="thumbnail ">
                        <a th:href="@{/book/detail(bookId=19)}"><img th:src="@{/images/maichanpinjiushimaiziji.jpg}"
                                                                     style="height: 200px; " alt="通用的占位符缩略图 "></a>
                        <div class="caption ">
                            <h3>卖产品就是卖自己</h3>
                        </div>
                    </div>
                </div>
                <!--<div>
                    <ul class="pager ">
                        <li>
                            <a href="# " onclick="pageUp() ">&larr;上一页</a>
                            <a href="# " onclick="pageDown() ">下一页 &rarr;</a>
                        </li>
                    </ul>
                </div>-->
            </div>
        </div>
    </div>
</div>

<div class="container">
    <!--首页底部信息 begin-->
    <div th:replace="common/footer::footer"></div>
</div>
<!--登录注册模态框-->
<div th:replace="common/login_register::login_register"></div>

<script th:src="@{/dist/js/jquery.min.js}"></script>
<script th:src="@{/js/carousel.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/dist/js/bootstrap.min.js}"></script>
<script th:src="@{/js/wow.js}"></script>
<script th:src="@{/js/login_register.js}"></script>
<script th:inline="javascript">
    //获取应用路径
    var contextPath = [[${#request.getContextPath()}]];
    var user = [[${session.user}]];
</script>
<script type="text/javascript">
    function addCart(bookId) {

        var bookCount = $("#selectCount").val();
        // 图书数量的控制

        if (bookCount == '' || bookCount == 'undefined') {
            alert("请输入想要购买图书的数量~~")
            return;
        }
        // 用户是否登录的控制
        if (user == '' || user == null) {
            alert("请先登录~~")
            return;
        }

        // 跳转到购物车页面
        $.ajax({
            url: contextPath + '/cart/add',
            data: {'bookId': bookId, 'count': bookCount},
            method: "post",
            success: function (data) {
                if (data == 'success') {
                    window.location.href = contextPath + "/cart/list";
                } else {
                    alert("加入购物车失败，请联系开发人员~~")
                }
            }
        })
    }
</script>
</body>
</html>